<template>
    <div style="width: 100%">
      <el-table
      :data="saleData"
      style="width: 100%"
      border
      max-height="75vh">
        <el-table-column
        type="index"
        style="width: 5vw">
        </el-table-column>
        <el-table-column
          label="备注"
          style="width: 10vw">
          <template slot-scope="scope">
            <el-tag
              type="info"
              v-for="tag in scope.row.tags"
              :key="tag"
            >{{tag}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="商品"
          style="width: 15vw">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.goodModel.good.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="条码"
          style="width: 15vw">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.goodModel.good.barcode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          style="width: 10vw">
          <template slot-scope="scope">
            <el-input-number
            v-model="scope.row.num"
            :min="1"
            size="mini"
            @change="countPrice(scope.$index)"
            style="width: 100%">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="原价"
          style="width: 10vw">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.goodModel.good.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="现价"
          style="width: 10vw">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.actualPrice"
              @input="countPrice(scope.$index)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="合计"
          style="width: 10vw">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.totalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        style="width: 5vw">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        name: "SaleTable",
      props:['saleData','handleDelete','countPrice'],
      data() {
        return {
        }
      },
      methods: {
        handleEdit(index, row) {
          console.log(index, row);
        },

      }
    }
</script>

<style scoped>

</style>
